<script setup>
	import { ref } from 'vue'
const searchMsg = ref('')
const search = () => {
	uni.$emit('search',{search:searchMsg.value})
}
const goMsg = () => {
	uni.$emit('goMsg')
}
</script>

<template>
	<view class="nav-bar">
		<view class="logo"></view>
		<view class="search">
			<input class="input" v-model="searchMsg" type="text" placeholder="请输入关键字进行搜索任务" confirm-type="search" @confirm="search">
		</view>
		<view class="notification" >
			<view class="dot" @click='goMsg'></view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.nav-bar {
    width: 100vw;
		display: flex;
		align-items: center;
		height: 96rpx;
		background-color: #faca2a;

		.logo {
			width: 96rpx;
			height: 96rpx;
			margin-right: 16rpx;
			background: url('http://recommender.starsky.fun/tpl/Public/xsm/img/logo.png') 0 0/96rpx;
		}

		.search {
			flex: 1;
			height: 64rpx;

			.input {
				height: 64rpx;
				padding-left: 32rpx;
				line-height: 64rpx;
				font-size: 24rpx;
				color: #757575;
				border-radius: 32rpx;
				background-color: #fff;
			}
		}

		.notification {
			position: relative;
			width: 48rpx;
			height: 48rpx;
			margin: 24rpx 16rpx;
			background: url('http://recommender.starsky.fun/tpl/Public/xsm/img/icon_notification.png') 0 0/48rpx;

			.dot {
				position: absolute;
				top: 0;
				right: 0;
				width: 16rpx;
				height: 16rpx;
				background-color: #f00;
				border-radius: 8rpx;
			}
		}
	}
</style>